<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
    <script src="./lib/three/OBJLoader.js"></script>
    <script src="./lib/three/MTLLoader.js"></script>
    <script src="./lib/three/OBJMTLLoader.js"></script>
    <!-- 轨迹球控件 -->
    <script src="./lib/three/TrackballControls.js"></script>
  </head>
  <body>
    <script>
      // 创建3D场景对象Scene
      const scene = new THREE.Scene();

      const width = window.innerWidth;
      const height = window.innerHeight;
      // 实例化一个透视投影相机对象
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
      //相机在Three.js三维坐标系中的位置
      // 根据需要设置相机位置具体值
      camera.position.set(0, 300, 400);
      camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向(指向的场景对象

      //创建轨迹球控件
      const trackball = new THREE.TrackballControls(camera);
      // 创建渲染器对象Renderer
      const renderer = new THREE.WebGLRenderer();
      // 设置渲染器的尺寸
      renderer.setSize(width, height);
      // 将渲染器中的内容添加到body中
      document.body.appendChild(renderer.domElement);

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(2000, 8000, 4000);
      scene.add(spotLight);

      //加载模型文件
      const loader = new THREE.OBJMTLLoader();
      loader.load(
        "./assets/models/city.obj",
        "./assets/models/city.mtl",
        function (object) {
          scene.add(object);
        }
      );
      const animation = () => {
        trackball.update();
        // 渲染
        renderer.render(scene, camera);

        requestAnimationFrame(animation);
      };
      animation();
    </script>
  </body>
</html>
